import logo from './logo.svg'
import './App.css'
import { createElement, useState } from 'react'

// 导入相关子组件
// import FuncComponent from './components/FuncComponent'
// import ClassComponent from './components/ClassComponent'
// import Parent from './components/Parent'
// import Parent from './components/brother/Parent'
// import Parent from './components/context/Parent'
// import Parent from './components/parent-child/Parent'
// import Index from './components/if/Index'
// import Index from './components/for/Index'
// import Index from './components/ref/Index'
// import Index from './components/style/Index'
// import Index from './components/class/Index'
// import Index from './components/life/Index'
// import Index from './components/slot/Index'
// import Index from './components/axios/Index'
// import Index from './components/router-base/Index'
import Index from './components/router-nest/Index'

// import Index from './components/hoc2/Index'

// import Index from './components/render-props2/Index'

// import Index from './components/render-props/Index'

// import Index from './components/hoc/Index'

// import UseStateDemo from './hook/UseStateDemo'

// import UseEffectDemo from './hook/UseEffectDemo'

// import UseContextDemo from './hook/UseContextDemo'
// import UseRefDemo from './hook/UseRefDemo'
// import UseCallbackDemo from './hook/UseCallbackDemo'
// import UseMemoDemo from './hook/UseMemoDemo'
// import UseLayoutEffectDemo from './hook/UseLayoutEffectDemo'
// import UseDebugValueDemo from './hook/UseDebugValueDemo'
// import UseIdDemo from './hook/UseIdDemo'
// import UseDeferredValueDemo from './hook/UseDeferredValueDemo'
// import UseTransitionDemo from './hook/UseTransitionDemo'
// import Index from './hook/Index'

function App () {
  const [isShow] = useState(true)
  // javascript xml
  // 标签 xml & html 都是标签，写在 javascript 中，叫做jsx
  // react中视图渲染主要靠 jsx，vue 中靠 template
  // jsx浏览器不认识，默认要靠babel转换（脚手架已经帮你弄好了）
  return (
    <div className='App'>
      {/* <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header> */}
      {/* <FuncComponent /> */}
      {/* <hr /> */}
      {/* <ClassComponent /> */}

      {/* <Parent /> */}
      {/* <Index /> */}
      {/* <UseStateDemo /> */}

      {/* {isShow && <UseEffectDemo />} */}

      {/* <UseContextDemo /> */}
      {/* <UseRefDemo /> */}
      {/* <UseCallbackDemo /> */}
      {/* <UseMemoDemo /> */}
      {/* <UseLayoutEffectDemo /> */}
      {/* <UseDebugValueDemo /> */}
      {/* <UseIdDemo /> */}
      {/* <UseDeferredValueDemo /> */}
      {/* <UseTransitionDemo /> */}
      <Index />
    </div>
  )

  /**
  return createElement('ul', { id: 'ulId' }, [
    createElement('li', null, '烧鸭饭'),
    createElement('li', null, '烧鸡饭'),
    createElement('li', null, '鸡腿饭')
  ])
   */
  // return createElement('div', { className: 'App' }, [
  //   createElement('header', { className: 'App-header' }, [
  //     createElement('img', { src: logo, className: 'App-logo', alt: 'logo' }),
  //     createElement(
  //       'p',
  //       null,
  //       'Edit <code>src/App.js</code> and save to reload.'
  //     ),
  //     createElement('a', { href: 'https://reactjs.org' }, 'Learn React')
  //   ])
  // ])
}

export default App
